<template>
	<div class="app-container">
		<div class="head-container">
			<div v-if="crud.props.searchToggle">
				<el-input v-model="query.title" clearable size="small" placeholder="根据服务标题进行检索" style="width: 200px;"
					class="filter-item" @keyup.enter.native="crud.toQuery" />
				<rrOperation />
			</div>
			<crudOperation ref="test" :permission="permission" />
		</div>

		<!-- 表单 -->
		<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU"
			:visible.sync="crud.status.cu > 0" :title="crud.status.title" width="1020px">
			<el-form ref="form" :model="form" label-width="120px">
				<el-form-item label="服务标题">
					<el-input v-model="form.title" />
				</el-form-item>
				<el-form-item label="服务图片">
					<el-upload ref="upload" multiple accept=".jpg,.jpeg,.png,.JPG,.JPEG" :http-request="uploadImg"
						action="#" :auto-upload="false" list-type="picture-card" :on-remove="handleRemove">
						<i class="el-icon-plus" />
					</el-upload>
					<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传
					</el-button>
				</el-form-item>
				<el-form-item label="服务现价格">
					<el-input v-model="form.price" />
				</el-form-item>
				<el-form-item label="服务原价">
					<el-input v-model="form.oldPrice" />
				</el-form-item>
				<el-form-item label="联系电话">
					<el-input v-model="form.contactNumber" />
				</el-form-item>
				<el-form-item label="服务所在地">
					<el-select v-model="form.serviceCity" placeholder="请选择服务所在的城市">
						<el-option v-for="(item,index) in cityList" :key="index" :label="item.value"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="服务描述">
					<editor-bar v-model="form.introduction" />
				</el-form-item>
				<el-form-item label="服务类型">
					<el-select v-model="form.type" placeholder="请选择服务类型">
						<el-option v-for="(item,index) in serviceTypeList" :key="index" :label="item.value"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="是否参加活动">
					<el-switch v-model="form.activityFlag" inactive-value="0" active-value="1"
						@change="activityChange" />
				</el-form-item>
				<el-form-item v-if="form.activityFlag == 1" label="参加活动">
					<el-select v-model="form.activityId" placeholder="请选择服务要参加的活动">
						<el-option v-for="(item,index) in activityList" :key="index" :label="item.name"
							:value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item v-if="form.activityFlag == 1" label="参加活动天数">
					<el-input-number v-model="form.limitDate" :min="1" label="请输入天数"></el-input-number>
				</el-form-item>
				<el-form-item label="服务流程">
					<el-button type="success" icon="el-icon-plus" @click="addInput" />
					<el-button type="warning" icon="el-icon-minus" @click="delInput" />
				</el-form-item>
				<div v-for="(item,index) in form.serviceProcessVOS" :key="index">
					<el-form-item :label="'流程' + (index+1)">
						<el-input v-model="item.name" />
					</el-form-item>
				</div>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="text" @click="crud.cancelCU">取消</el-button>
				<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
			</div>
		</el-dialog>

		<!-- 详情 -->
		<el-dialog title="详情展示" :visible.sync="dialogVisible" width="50%">
			<el-card class="box-card">
				<el-collapse>
					<el-collapse-item title="服务描述" name="1">
						<div v-html="service.introduction" />
					</el-collapse-item>
					<el-collapse-item title="服务流程" name="2">
						<el-steps :active="0" align-center>
							<el-step v-for="(item,index) in service.serviceProcessVOS" :key="index"
								:title="item.name" />
						</el-steps>
					</el-collapse-item>
				</el-collapse>
			</el-card>
		</el-dialog>

		<!--表格渲染-->
		<el-table ref="table" v-loading="crud.loading" max-height="450" :data="crud.data" style="width: 100%;"
			@selection-change="crud.selectionChangeHandler">
			<el-table-column type="selection" width="55" />
			<!-- <el-table-column type="index" fixed="left" width="50" /> -->
			<el-table-column fixed="left" align="center" prop="title" width="150px" label="服务标题" />
			<el-table-column fixed="left" align="center" prop="coverImg" width="150px" label="服务封面">
				<template slot-scope="scope">
					<el-image style="width: 100px; height: 100px" :preview-src-list="scope.row.coverImg"
						:src="scope.row.coverImg[0]" fit="contain" />
				</template>
			</el-table-column>
			<el-table-column prop="type" align="center" width="100px" label="服务类型" />
			<el-table-column prop="price" width="100px" align="center" label="服务现价" />
			<el-table-column prop="oldPrice" width="100px" align="center" label="服务原价" />
			<el-table-column prop="activityFlag" align="center" width="150px" label="是否参加活动">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.activityFlag == '1'" type="success">是</el-tag>
					<el-tag v-if="scope.row.activityFlag == '0'" type="info">否</el-tag>
				</template>
			</el-table-column>
			<el-table-column width="150px" align="center" prop="activityName" label="活动名称" />
			<el-table-column width="100px" align="center" prop="advisoryNumber" label="咨询人数" />
			<!-- <el-table-column width="100px" align="center" prop="introduction" label="服务描述"
				:show-overflow-tooltip="true">
				<template slot-scope="scope">
					<div v-html="scope.row.introduction"></div>
				</template>
			</el-table-column> -->
			<el-table-column width="150px" align="center" prop="popularFlag" label="是否热门服务">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.popularFlag == 1" type="success">是</el-tag>
					<el-tag v-if="scope.row.popularFlag == 0" type="info">否</el-tag>
				</template>
			</el-table-column>
			<el-table-column width="150px" align="center" prop="contactNumber" label="联系电话" />
			<el-table-column width="150px" align="center" prop="serviceCity" label="服务所在地" />
			<el-table-column width="100px" align="center" prop="putShelf" label="服务状态">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.putShelf == 1" type="success">已上架</el-tag>
					<el-tag v-if="scope.row.putShelf == 0" type="danger">已下架</el-tag>
				</template>
			</el-table-column>
			<el-table-column v-if="checkPer(['admin','menu:edit','menu:del'])" label="操作" align="center" width="300px"
				fixed="right">
				<template slot-scope="scope">
					<udOperation style="display:inline-block;" :data="scope.row" :permission="permission"
						msg="确定删除吗，此操作不能撤销！" />

					<el-popover placement="top-start" title="上架" trigger="hover" content="服务上架操作">
						<el-button v-if="scope.row.putShelf == 0" slot="reference" type="success"
							style="display:inline-block;" icon="el-icon-upload2"
							@click="putShelfChange(scope.row.id,1)" />
					</el-popover>

					<el-popover placement="top-start" title="下架" trigger="hover" content="服务下架操作">
						<el-button v-if="scope.row.putShelf == 1" slot="reference" type="warning"
							style="display:inline-block;" icon="el-icon-download"
							@click="putShelfChange(scope.row.id,0)" />
					</el-popover>

					<el-popover placement="top-start" title="热门服务推送" trigger="hover" content="热门服务推送操作">
						<el-button v-if="scope.row.popularFlag == 0" slot="reference" type="success"
							style="display:inline-block;" icon="el-icon-s-promotion
" @click="popularServiceChange(scope.row.id,1)" />
					</el-popover>

					<el-popover placement="top-start" title="热门服务取消" trigger="hover" content="热门服务取消操作">
						<el-button v-if="scope.row.popularFlag == 1" slot="reference" type="warning"
							style="display:inline-block;" icon="el-icon-s-promotion
" @click="popularServiceChange(scope.row.id,0)" />
					</el-popover>

					<el-button slot="reference" type="primary" style="display:inline-block;" icon="el-icon-view"
						@click="openDetail(scope.row)" />
				</template>
			</el-table-column>
		</el-table>
		<!--分页组件-->
		<pagination />
	</div>
</template>

<script>
	import crudService from '@/api/finace_taxation/service.js'
	import CRUD, {
		presenter,
		header,
		form,
		crud
	} from '@crud/crud'
	import rrOperation from '@crud/RR.operation'
	import crudOperation from '@crud/CRUD.operation'
	import pagination from '@crud/Pagination'
	import udOperation from '@crud/UD.operation'
	import axios from 'axios'
	import editorBar from '../../../components/wangeditor/editoritem.vue'

	// crud交由presenter持有
	const defaultForm = {
		title: null,
		introduction: null,
		price: null,
		activityId: null,
		type: null,
		activityFlag: '0',
		coverImg: null,
		contactNumber: null,
		serviceCity: null,
		serviceProcessVOS: []
	}

	export default {
		name: 'Service',
		components: {
			pagination,
			crudOperation,
			rrOperation,
			udOperation,
			editorBar
		},
		cruds() {
			return CRUD({
				url: 'api/ft/ftService',
				title: '服务管理',
				crudMethod: {
					...crudService
				}
			})
		},
		mixins: [presenter(), header(), form(defaultForm), crud()],
		data() {
			return {
				delLoading: false,
				permission: {
					add: ['admin', 'menu:add'],
					edit: ['admin', 'menu:edit'],
					del: ['admin', 'menu:del']
				},
				dialogImageUrl: '',
				serviceTypeList: [],
				activityList: [],
				formData: '',
				pop: false,
				cityList: [],
				dialogVisible: false,
				service: {
					serviceProcessVOS: [],
					introduction: ''
				}
			}
		},
		created() {
			this.crud.optShow = {
				add: true,
				reset: true
			}
			this.dictDetail()
			this.getActivityList()
			this.companyCityDictDetail()
		},
		methods: {
			openDetail(data) {
				this.dialogVisible = true
				this.service.introduction = data.introduction
				this.service.serviceProcessVOS = data.serviceProcessVOS
			},
			addInput() {
				const obj = {}
				obj.id = ''
				obj.name = ''
				obj.serviceId = ''
				this.crud.form.serviceProcessVOS.push(obj)
			},
			delInput() {
				this.crud.form.serviceProcessVOS.splice(this.crud.form.serviceProcessVOS.length - 1, 1)
			},
			companyCityDictDetail() {
				const that = this
				const params = {
					dictName: 'company_city'
				}
				setTimeout(() => {
					crudService.dictDetail(params).then(res => {
						that.cityList = res.company_city
					})
				}, 100)
			},
			activityChange() {
				if (this.form.activityFlag === '0') {
					this.form.activityId = null
				}
			},
			uploadImg(file) {
				this.formDate.append('file', file.file)
			},
			handleRemove(file, fileList) {},
			submitUpload() {
				this.formDate = new FormData()
				this.$refs.upload.submit()
				this.formDate.append('WS_CODE', '12133')
				const config = {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				}
				axios.post('http://112.74.52.238:8000/api/ft/uploadUtil/uploadImage', this.formDate, config).then(res => {
					this.crud.form.coverImg = res.data.result
					this.$refs.upload.clearFiles()
					this.crud.notify('图片上传成功', 'success')
				}).catch(res => {
					this.crud.notify('图片上传失败', 'error')
				})
			},
			dictDetail() {
				const params = {
					dictName: 'service_type'
				}
				setTimeout(() => {
					crudService.dictDetail(params).then(res => {
						this.serviceTypeList = res.service_type
					})
				}, 100)
			},
			getActivityList() {
				crudService.getActivity(null).then(res => {
					this.activityList = res.content
				})
			},
			putShelfChange(id, putShelf) {
				const params = {
					id: id,
					putShelf: putShelf
				}
				crudService.putShelf(params).then(res => {
					if (res.success) {
						this.crud.notify(res.message, 'success')
						const list = this.crud.data
						for (let i = 0; i < list.length; i++) {
							if (id === list[i].id) {
								list[i].putShelf = putShelf
							}
						}
					} else {
						this.crud.notify(res.message, 'error')
					}
				})
			},
			popularServiceChange(id, popularFlag) {
				const params = {
					id: id,
					popularFlag: popularFlag
				}
				crudService.popularService(params).then(res => {
					if (res.success) {
						this.crud.notify(res.message, 'success')
						const list = this.crud.data
						for (let i = 0; i < list.length; i++) {
							if (id === list[i].id) {
								list[i].popularFlag = popularFlag
							}
						}
					} else {
						this.crud.notify(res.message, 'error')
					}
				})
			}
		}
	}
</script>
<style>
	.name-wrapper {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.text {
		font-size: 14px;
	}

	.item {
		padding: 18px 0;
	}

	.box-card {
		width: 100%;
	}
</style>
